<template>
  <div class="order-wrapper">
    <div class="left-wrapper">
      <div class="left-tablt-wrap">
        <div>
          <div class="header-wrap">
            <div class="uploader-wrap">
              <el-upload v-model:file-list="fileList" class="upload-demo"
                action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple
                :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3"
                :on-exceed="handleExceed">
                <el-button type="primary">Click to upload</el-button>
                <template #file="{ file }">
                  <div class="file-item">
                    <span>{{ file.name }}</span>
                    <span class="file-size">{{ file.size }} bytes</span>
                  </div>
                </template>
                <template #tip>
                  <div class="el-upload__tip">size less than 500KB.</div>
                </template>
              </el-upload>
            </div>
            <div class="progress-wrap">
              <el-progress :text-inside="true" :stroke-width="26" :percentage="70" />
            </div>
          </div>
        </div>
        <div class="table1-wrap">
          <div class="header">
            <el-input v-model="state.orderNo" style="width: 200px; margin:10px 10px 10px 0px" size="small"
              placeholder="搜索..." :prefix-icon="Search" @change="handleOption" clearable />
          </div>
          <OrderTable :itemColumn="state.itemColumn1" @changeTable="changeTable"
            @handleSelectionChange="handleSelectionChange" @update@Table="updateTable" @handleClose="handleClose" />
        </div>  <div class="table2-wrap">
          <div class="header">
            <el-input v-model="state.orderNo" style="width: 200px; margin:10px 10px 10px 0px" size="small"
              placeholder="搜索..." :prefix-icon="Search" @change="handleOption" clearable />
          </div>
          <OrderTable :itemColumn="state.itemColumn2" @changeTable="changeTable"
            @handleSelectionChange="handleSelectionChange" @update@Table="updateTable" @handleClose="handleClose" />
        </div>
      </div>
    </div>
    <div class="right-wrapper">
      <div class="ecahrt-wrap"> <BaseEcharts1 /> </div>
      <div class="ecahrt-wrap">  <BaseEcharts2 /> </div>
      <div class="ecahrt-wrap">   <BaseEcharts3 /></div>
   
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { HomeFilled, Delete, Search } from "@element-plus/icons-vue";
import axios from "@/utils/axios";
import OrderTable from "./orderComponents/OrderTable.vue";
import BaseEcharts1 from "./orderComponents/BaseEcharts1.vue";
import BaseEcharts2 from "./orderComponents/BaseEcharts2.vue";
import BaseEcharts3 from "./orderComponents/BaseEcharts3.vue";
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  multipleSelection: [], // 选中项
  total: 0, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10, // 分页大小
  orderNo: "", // 订单号
  orderStatus: "", // 订单状态
  // 订单状态筛选项默认值
  options: [
  ],
  itemColumn1: [
    {
      type: "selection",
      prop: "orderNo",
      label: "文件名称",
    },
    {
      prop: "totalPrice",
      label: "上传者",
    },
    {
      prop: "createTime",
      label: "上传时间",
    },
  ],
  itemColumn2: [
    {
      type: "radio",
      prop: "orderNo",
      label: "文件名称",
    },
    {
      prop: "totalPrice",
      label: "上传者",
    },
    {
      prop: "createTime",
      label: "上传时间",
    },{
      prop: "createTime1",
      label: "上传1",
    },{
      prop: "createTime2",
      label: "上传2",
    },{
      prop: "createTime3",
      label: "上传3",
    },{
      prop: "createTime4",
      label: "上传4",
    },{
      prop: "createTime5",
      label: "上传5",
    },
  ],
});

const parentMsg = ref("父组件传递值是a");





// 初始化获取订单列表
onMounted(() => {
  // getOrderList()
});







// 获取列表方法
const getOrderList = () => {
  state.loading = true;
  axios
    .get("/orders", {
      params: {
        pageNumber: state.currentPage,
        pageSize: state.pageSize,
        orderNo: state.orderNo,
        orderStatus: state.orderStatus,
      },
    })
    .then((res) => {
      state.tableData = res.list;
      state.total = res.totalCount;
      state.currentPage = res.currPage;
      state.loading = false;
    });
};
// 触发过滤项方法
const handleOption = () => {
  state.currentPage = 1;
  getOrderList();
};
// checkbox 选择项
const handleSelectionChange = (val) => {
  state.multipleSelection = val;
};


const updateTable = (data) => {
  console.log("ge更新表也可以请求接口", data);
  state.tableData = data
}; const handleClose = (id) => {
  console.log("删除idid", id);
};

// 翻页方法
const changeTable = (val) => {
  state.currentPage = val;
  console.log("翻页value", val);
};
</script>

<style scoped lang="scss">
@use "./Order.scss";
</style>
